import { Button, Card, Col, Form, List, Row, Select, Tag, Typography } from 'antd';
import React from 'react';
import moment from 'moment';
import styles from './index.less';

const {Text} = Typography;

type ArticleListContentProps = {
  data: {
    content: string;
    time: string;
    category: string;
    source: string;
    url: string;
    title: string;
    id: number;
    href: string;
  };
};

const ArticleListContent: React.FC<ArticleListContentProps> = ({
  data: { content, time, category, source, url, title, id, href },
}) => (
  <List.Item
              key={id}
              extra={<div className={styles.listItemExtra} />}
            >
              <List.Item.Meta
                title={
                  <a className={styles.listItemMetaTitle} href={href}>
                    {title}
                  </a>
                }
                description={
                  <span>
                    <Tag>{category}</Tag>
                  </span>
                }
              />
  <div className={styles.listContent}>
    <div className={styles.description}>
     <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
    <div className={styles.extra}>
      <a href={url}>{source}</a> 发布在 <br></br> <a href={url}>{url}</a> <br></br> <em>{time}</em>
    </div>
  </div>
  </List.Item>
);

export default ArticleListContent;
